<template>
  <view class="page">
    <Navbar title="消息详情" occupy>
      <u-icon slot="left" name="arrow-left" color="#fff" />
    </Navbar>
    <view
      class="f f-ac f-jb row"
      v-for="(i, k) in dataList"
      :key="k"
      @click="handleDetail(i)"
    >
      <view>
        <view class="f f-ac f-js">
          <u-icon name="bell-fill" size="32rpx" color="#24DE73" />
          <view style="margin-left: 20rpx">
            <u-text
              :text="i.messageTitle || '-'"
              color="#ffffff"
              bold
              size="28rpx"
              lines="1"
              line-height="26"
            />
          </view>
        </view>
        <view class="f f-ac f-js">
          <u-icon name="clock" size="32rpx" color="#24DE73" />
          <view style="margin-left: 20rpx">
            <u-text
              :text="i.createTime"
              color="#909090"
              size="24rpx"
              lines="1"
              line-height="26"
            />
          </view>
        </view>
      </view>
      <view class="f f-ac">
        <view v-if="i.state == 1" class="badge" />
        <u-icon name="arrow-right" color="#b6b6b6" size="16" />
      </view>
    </view>
    <u-loadmore :status="status" height="40" />
  </view>
</template>

<script>
import { getMessageList } from "@/request/myApi.js";
export default {
  data() {
    return {
      queryForm: {
        messageType: 1, // 消息类型 1-公告 2-消息
        pageSize: 10,
        pageNum: 1,
      },
      total: 0, // 总条数
      status: "loadmore", // 加载状态
      dataList: [], // 数据列表
    };
  },
  onLoad(e) {
    this.queryForm.messageType = e.messageType;
    this.getDataList();
  },
  // 上拉加载
  onReachBottom() {
    if (this.total <= this.dataList.length) return;
    this.queryForm.pageNum++;
    this.getDataList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.queryForm.pageNum = 1;
    this.getDataList();
  },
  methods: {
    // 跳转消息详细
    handleDetail(i) {
      i.state = 2; // 已读
      uni.navigateTo({ url: `/pages/my/myMessageDetail?id=${i.id}` });
    },
    // 获取消息列表
    getDataList() {
      this.status = "loading";
      getMessageList(this.queryForm)
        .then((res) => {
          if (res.code == 200) {
            let { pageNum } = this.queryForm;
            this.dataList = pageNum == 1 ? res.rows : this.dataList.concat(res.rows);
            this.total = res.total;
          } else {
            uni.showToast({
              title: res.msg || "服务器错误",
              icon: "none",
              mask: true,
            });
          }
        })
        .finally(() => {
          this.status = this.total <= this.dataList.length ? "nomore" : "loadmore";
          uni.stopPullDownRefresh();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  position: relative;
  padding: 20rpx;
  .row {
    color: #fff;
    font-size: 28rpx;
    padding: 30rpx 0;
    border-bottom: 1rpx solid rgba(217, 217, 217, 0.3);
    &:active {
      background: linear-gradient(to right, #15161c 0%, #142527 90%);
    }
    .avatar {
      border: 4rpx solid #24de73;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
    }
    .badge {
      display: inline-block;
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background-color: #24de73;
      margin-right: 20rpx;
    }
  }
}
</style>
